<template>
  <div class="login-sms-container">
    <el-form layout="vertical">
      <el-form-item>
        <el-input
          v-model="state.sms.cellphone"
          size="large"
          placeholder="请输入手机号码"
          @keydown="handleInputCellphone"
        >
          <template #prepend>
            <el-icon class="icon-style"><cellphone /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="state.sms.smsCode" size="large" placeholder="请输入短信验证码" @keyup.enter="handleSmsLogin">
          <template #prepend>
            <el-icon class="icon-style"><scale-to-original /></el-icon>
          </template>
          <template #suffix>
            <el-link :underline="false" :disabled="disabledGetSmsCodeBtn" @click="handleGetSmsCode">
              <span :class="`get-smsCode ${state.waiting ? 'waiting' : ''}`">
                {{ state.waiting ? state.waitText : '获取短信验证码' }}
              </span>
            </el-link>
          </template>
        </el-input>
      </el-form-item>
      <el-button
        class="login-btn"
        type="primary"
        size="large"
        :disabled="disabledLoginSmsBtn"
        :loading="props.loading"
        @click="handleSmsLogin"
      >
        <span class="submit-text">登录</span>
      </el-button>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { computed, reactive } from 'vue'
import { ElMessage, ElForm, ElFormItem, ElInput, ElLink } from 'element-plus'
import { ScaleToOriginal, Cellphone } from '@element-plus/icons-vue'
import type { Sms } from '@/api/modules/auth/auth'
import { authApi } from '@/api/modules/auth/auth'
import './style.scss'

const props = withDefaults(defineProps<{ loading: boolean }>(), { loading: false })
const emits = defineEmits(['login'])

// 定义所有响应式变量
const state = reactive({
  loginType: 0,
  sms: {
    smsCode: '',
    cellphone: ''
  } as Sms,
  waiting: false,
  waitText: ''
})

const disabledLoginSmsBtn = computed(() => state.sms.cellphone == '' || state.sms.smsCode == '')
const disabledGetSmsCodeBtn = computed(() => state.sms.cellphone == '' || state.waiting)

const handleSmsLogin = () => {
  if (state.sms.cellphone !== '' && state.sms.smsCode != '') {
    if (state.sms.cellphone.length !== 11) {
      ElMessage.error('手机号码不合法')
    } else {
      emits('login', { loginData: state.sms, loginFn: authApi.loginSms })
    }
  }
}
const handleGetSmsCode = () => {
  if (state.sms.cellphone !== '') {
    if (state.sms.cellphone.length !== 11) {
      ElMessage.error('手机号码不合法')
    } else {
      authApi.sendSmsCode(state.sms.cellphone).then(resp => {
        if (!resp.success) {
          ElMessage.error(resp.message)
        } else {
          waitSmsCode()
        }
      })
    }
  }
}

const stateTime = reactive<{ intervalId: any; lastTime: number }>({ intervalId: '', lastTime: 60 })
const waitSmsCode = () => {
  state.waiting = true
  state.waitText = '60s后获取'
  stateTime.intervalId = setInterval(() => {
    state.waitText = `${stateTime.lastTime}s后获取`
    stateTime.lastTime--
    if (stateTime.lastTime <= 0) {
      clearInterval(stateTime.intervalId) // 清除计时器
      stateTime.intervalId = 0 // 设置为null
      stateTime.lastTime = 60
      state.waiting = false
    }
  }, 1000)
}

const handleInputCellphone = () => {
  //区分不同浏览器,不同操作系统,大键盘小键盘
}
</script>
<style lang="scss" scoped>
.login-sms-container {
  // @extend .login-xxx-container;
  .captcha-img {
    height: 40px;
    width: 100px;
    cursor: pointer;
  }
  .get-smsCode {
    &.waiting {
      color: $--color-text-secondary;
    }
  }
  .icon-style {
    font-size: $--size-font-x-large;
  }
  .submit-text {
    font-size: $--size-font-x-large;
    letter-spacing: 0.5rem;
  }
  .submit-text {
    font-size: $--size-font-x-large;
    letter-spacing: 0.5rem;
  }

  .login-btn {
    width: 100%;
    margin-top: 1rem;
  }
}
</style>
